<template>
  <div class="left-pop">
    <div class="left-pop-main" ref="leftpopRef" v-show="data.showPop">
      <slot></slot>
    </div>
    <div class="left-pop-ctrl">
      <div class="left-pop-ctrl-option" @click="disPlayPop">
        <el-icon :size="20" color="#aaa">
          <d-arrow-left v-show="data.showPop" />
          <d-arrow-right v-show="!data.showPop" />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from "vue";
import { DArrowLeft, DArrowRight } from "@element-plus/icons";
import { useStore } from "vuex";

const leftpopRef = ref();

let data: any = reactive({
  showPop: true,
});

const store = useStore();

const disPlayPop = () => {
  data.showPop = !data.showPop;
  //下一帧
  nextTick(() => {
    synchronizedWidth();
  });
};

const synchronizedWidth = () => {
  let currentWidth = window.getComputedStyle(leftpopRef.value).width;
  if (data.showPop) store.dispatch("leftpop/changeLeftpopWidth", currentWidth);
  else store.dispatch("leftpop/changeLeftpopWidth", 0);
};

onMounted(() => {
  synchronizedWidth();
});
</script>

<style lang="less" scoped>
.left-pop {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  z-index: 1;

  .left-pop-main {
    width: 400px;
    max-height: calc(100vh - 60px);
    background: #ffffff;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: rgb(50, 126, 222);
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background-color: transparent;
    }
  }

  .left-pop-ctrl {
    width: 40px;
    position: relative;
    cursor: pointer;

    .left-pop-ctrl-option {
      position: absolute;
      top: 50%;
      margin-top: -80px;
      margin-left: -10px;
      padding-left: 10px;
      height: 160px;
      width: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
    }
  }
}
</style>